<script>

export default {
  name: 'BoWen',
  data () {
    return {
      shu1: '',
      zs: [],
      zshu: '',
      dangqianye: 1
    }
  },
  computed: {
    bowen1 () {
      return this.$store.state.bowen
    }
  },
  async created () {
    this.zs = await this.$store.dispatch('getBowen')
    this.zongshu('Django')
  },
  mounted () {
    // this.$nextTick(() => {
    //   console.log(this.bowen)
    // })
    this.ye(this.dangqianye)
  },
  methods: {
    zongshu (val) {
      // console.log(val)
      this.dangqianye = 1
      this.ye(this.dangqianye)
      this.$nextTick(() => {
        // console.log(this.zs)
        this.zshu = this.zs.filter(i => i.fenlei_display === val).length
      })
    },
    ye (val) {
      // console.log(this.dangqianye)
      this.shu1 = val
    }
  }
}
</script>

<template>
  <div>
    <div class="bj"></div>
    <el-row style="display: flex; justify-content: center;max-width: 100%">
      <el-col :xs="24" class="mokuai2">
        <e-tab2 tabPosition="top" :shu1="shu1" @zongshu="zongshu">
        </e-tab2>
      </el-col>
    </el-row>
    <el-pagination
      class="fenye"
      @current-change="ye"
      :current-page.sync="dangqianye"
      background
      layout="prev, pager, next"
      page-size="3"
      :total="zshu">
    </el-pagination>
  </div>
</template>

<style scoped lang="scss">
$bgd: rgba(0, 0, 0, 0.5);
$hoverbgd: rgba(0, 0, 0, 1);
$textcol: white;
.bj {
  height: 50px;
  transition: all .5s;
  @media (max-width: 992px) {
    height: 0;
  }
}

.fenye {
  margin: auto;
  display: flex;
  justify-content: center;
  max-width: 400px;
  //border:2px solid #003153;
  border-radius: 10px;
  //background: $bgd;

  ::v-deep .btn-prev {
    background: $bgd!important;
    border-radius: 10px!important;
    &:hover {
      //background: $hoverbgd!important;
      color: $textcol;
    }
  }

  ::v-deep .btn-next {
    background: $bgd!important;
    border-radius: 10px!important;
  &:hover {
    color: $textcol;
  }
  }

  ::v-deep .el-pager .number {
    transition: all .5s;
    background: $bgd;
    border-radius: 10px;
    &:hover {
      background: $hoverbgd;
      color: $textcol !important;
    }
  }
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #003153;
}

.mokuai2 {
  max-width: 1400px;
  padding: 10px;
  //background: black;
  //display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 992px) {
  .mokuai2 {
    width: 98vw;
  }
}

//::v-deep .el-tab-pane{
//  display: flex;
//  justify-content: space-between;
//  flex-wrap: wrap;
//}
</style>
